<html>
<head>
    <meta content ="1280*720" name="page-view-size" http-equiv="">
    <title>二级列表</title>
    <link rel="stylesheet" href="/weixin-article/css/secondList.css">
</head>
<body>
<span class="title">村情村貌>村情组织</span>
<span class="page"></span>
<span class="title1">标题名称</span>
<span class="type1">类型</span>
<span class="time1">更新日期</span>
<div class="contentWrapper"></div>
</body>
<script src="/weixin-article/js/yajax.js"></script>
<script type="text/javascript">
    //截取传值参数
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
        var r = window.location.search.substr(1).match(reg);
        if (r!=null)return (r[2]); return null;
    }

    var clickFunction = function(keyEvent){
        keyEvent = keyEvent ? keyEvent : window.event;
        keyEvent.which = keyEvent.which ? keyEvent.which : keyEvent.keyCode;
        keycontrol(keyEvent);

    };
    //window.document.onkeypress = clickFunction;
    window.document.onkeydown = clickFunction;
    //按键操作
    function keycontrol(obj) {
        if (obj.which == 0x0026) {
            /* 上 */
            keyopt.moveBtn("go_top");
        } else if (obj.which == 0x0028) {
            /* 下 */
            keyopt.moveBtn("go_bottom");
        } else if (obj.which == 0x0025) {
            /* 左 */
            keyopt.moveBtn("go_left");
        } else if (obj.which == 0x0027) {
            /* 右 */
            keyopt.moveBtn("go_right");
        } else if (obj.which == 0x000D) {
            /* 确定 */
            keyopt.marksure();
        } else if ((obj.which <= 0x0038 && obj.which >= 0x0030) || obj.which == 0x118 || obj.which == 280) {
            keyopt.input(obj);
        } else if (obj.which == 113 || obj.which == 0x0008) {// 返回
//          obj.stopPropagation();
            obj.preventDefault();
            history.go(-1);
        }
    }
    //操作类型
    var keyopt = {
        options : {
            focusElm : "list1"
        },
        moveBtn : function(toDirection) {
            // 移动之前的id
            var oldBtnId = this.options.focusElm;
            // 将移动之前的元素json信息解析成json对象
            var old_obj_json = eval(oldBtnId + "_json");
            // 获取移动目的地的id信息
            var goElm = old_obj_json[toDirection];
            if (goElm == "") {
                goElm = oldBtnId;
            }
            var new_btn = document.getElementById(goElm);
            if (new_btn) {
                var onfocusFuc = eval(goElm + "_onfocus");  //之后ID的blur方法
                var onblurFuc = eval(oldBtnId + "_onblur");  //之前ID的focus方法
                onblurFuc(toDirection, oldBtnId);//go_buttom,top1
                this.options.focusElm = goElm;
                onfocusFuc(toDirection, goElm);//go_buttom,top2
            }
        },
        marksure : function() {
            if(document.getElementById(this.options.focusElm)){
                var onsubmitFuc = eval(this.options.focusElm + "_onsubmit");
                onsubmitFuc('',this.options.focusElm);
            }
        },
        input : function(code) {
            var onkeypressFuc = eval(this.options.focusElm + "_onkeypress");
            onkeypressFuc(code);
        },
        moveToElm : function(id) {
            var to_elm = document.getElementById(id);
            if (to_elm) {
                var onfocusFuc = eval(id + "_onfocus");
                var onblurFuc = eval(this.options.focusElm + "_onblur");
                onfocusFuc();
                this.options.focusElm = id;
                onblurFuc();
            }
        },
        addClass : function(id, className) {
            document.getElementById(id).className += " " + className;
        },
        removeClass : function(id, className) {//top1,,,top
            document.getElementById(id).className = document.getElementById(id).className      //class="1"
                .replace(className, '');
        },
        replaceClass : function(id, searchClass, replaceClass) {
            var className = document.getElementById(id).className;
            document.getElementById(id).className = className.replace(searchClass,
                replaceClass)
        }
    };

    var objIdArr=[];//内容ID集合
    var objTypeArr=[];//内容类型集合，0为图片，1为文字，2为图文
    var videoArr=[];//视频集合
    var typeArr=['图片','文字','图文','视频','人物公示','富文本'];//类型
    var typeEle =decodeURI(GetQueryString("name2"));
    var titleEle =decodeURI(GetQueryString("name1"));
    if(typeEle!=='undefined'){
        document.getElementsByClassName("title")[0].innerHTML=titleEle+">"+typeEle;
    }else {
        document.getElementsByClassName("title")[0].innerHTML=titleEle
    }
    var menuId =decodeURI(GetQueryString("menuId"));//菜单id
    var templateId =decodeURI(GetQueryString("templateId"));//模板ID
    var page=0;  //  当前页
    var pageMax=1;  // 总页数
    var versionCode=window.localStorage.getItem("versionCode");//获取版本号
    var token=window.localStorage.getItem('token');
    if(window.localStorage.getItem('listPage')){
        page=window.localStorage.getItem('listPage')-0;
        keyopt.options.focusElm=window.localStorage.getItem('focId');
        window.localStorage.removeItem("listPage");
        window.localStorage.removeItem("focId");
    }
    var jsonObj=JSON.parse(window.localStorage.getItem('jsonObj'));//获取接口json对象

    function getList(){
        new YAjax().request({
            url: "/api/weixin-article?pageSize=5&pageIndex="+page,
            method: "GET",
            success: function (data){
                var contentWrapperEle=document.getElementsByClassName("contentWrapper")[0];
                contentWrapperEle.innerHTML="";
                var obj =JSON.parse(data);
                console.log(obj);
                pageMax=obj.totalPages;
                objIdArr=[];
                objTypeArr=[];
                videoArr=[];
                for(var i = 0;i<obj.content.length;i++){
                    objIdArr[i]=obj.content[i].id;
                    objTypeArr[i]=obj.content[i].choiceway;
                    contentWrapperEle.innerHTML+=
                        '<div id="list'+(i+1)+'">' +
                        '<span class="listTitle">'+obj.content[i].title+'</span>' +
                        '<span class="type">'+'富文本'+'</span>' +
                        '<span class="time">'+(obj.content[i].createTime?obj.content[i].createTime.substring(0,10):obj.content[i].createtime.substring(0,10))+'</span>' +
                        '</div>';
                    if(i==obj.content.length-1){
                        eval(keyopt.options.focusElm+'_onfocus')('',keyopt.options.focusElm);
                    }
                }
                document.getElementsByClassName("page")[0].innerHTML="第"+(page+1)+"页 共"+pageMax+"页";
            }
        })
    }
    getList();

    function nextPage(){  // 下一页
        if(page+1<pageMax){
            page++;
            document.getElementsByClassName("page")[0].innerHTML="第"+(page+1)+"页 共"+pageMax+"页";
            getList();
            window.localStorage.setItem("pageEle",page);
        }
    }

    function lastPage(){  // 下一页
        if(page!=0){
            page--;
            document.getElementsByClassName("page")[0].innerHTML="第"+(page+1)+"页 共"+pageMax+"页";
            getList();
            window.localStorage.setItem("pageEle",page);
        }
    }

    function onFoc(id){ //设置列表获取焦点的状态
        document.getElementById(id).setAttribute('class','listFocus');
        roll('#'+id+'>.listTitle');
        if(page!=0){
            eval(id+'_json').go_left='list1';
        }else{
            eval(id+'_json').go_left='';
        }
        if(page<pageMax-1){
            eval(id+'_json').go_right='list1';
        }else{
            eval(id+'_json').go_right='';
        }
//        console.log(eval(id+'_json'));
    }

    function onBlur(id,code){
        document.getElementById(id).removeAttribute('class','listFocus');
        removeRoll('#'+id+'>.listTitle');
        if(page!=0&&code=='go_left'){
            page--;
            getList();
        }
        if(page<pageMax-1&&code=='go_right'){
            page++;
            getList();
        }
    }

    function onSub(num){//设置跳转并存储变量，以便做焦点返回
        window.localStorage.setItem("focId",keyopt.options.focusElm);
        window.localStorage.setItem("listPage",page);
        window.location="/weixin-article/detail?id="+objIdArr[num];
    }

    function roll(selector){//获取焦点是滚动,传入选择器
        var val=document.querySelectorAll(selector)[0].innerHTML;
        if(val.length>35){
            document.querySelectorAll(selector)[0].innerHTML='<marquee>'+val+'</marquee>';
        }
    }
    function removeRoll(selector){//失去焦点是滚动,传入选择器
        document.querySelectorAll(selector)[0].innerHTML=document.querySelectorAll(selector)[0].innerHTML.replace('<marquee>','').replace('</marquee>','');
    }

    var list1_json={
        "go_left":"",
        "go_top": "",
        "go_right": "",
        "go_bottom": "list2"
    };
    var list1_onfocus = function (code,id){
        onFoc(id);
    };
    var list1_onblur = function (code,id) {
        onBlur(id,code);
    };
    var list1_onsubmit = function (code,id) {
        onSub(0);
    };

    var list2_json={
        "go_left":"",
        "go_top": "list1",
        "go_right": "",
        "go_bottom": "list3"
    };
    var list2_onfocus = function (code,id){
        onFoc(id);
    };
    var list2_onblur = function (code,id){
        onBlur(id,code);
    };
    var list2_onsubmit = function (code,id) {
        onSub(1);
    };

    var list3_json={
        "go_left":"",
        "go_top": "list2",
        "go_right": "",
        "go_bottom": "list4"
    };
    var list3_onfocus = function (code,id){
        onFoc(id);
    };
    var list3_onblur = function (code,id) {
        onBlur(id,code);
    };
    var list3_onsubmit = function (code,id) {
        onSub(2);
    };

    var list4_json={
        "go_left":"",
        "go_top": "list3",
        "go_right": "",
        "go_bottom": "list5"
    };
    var list4_onfocus = function (code,id){
        onFoc(id);
    };
    var list4_onblur = function (code,id) {
        onBlur(id,code);
    };
    var list4_onsubmit = function (code,id) {
        onSub(3);
    };

    var list5_json={
        "go_left":"",
        "go_top": "list4",
        "go_right": "",
        "go_bottom": ""
    };
    var list5_onfocus = function (code,id){
        onFoc(id);
    };
    var list5_onblur = function (code,id) {
        onBlur(id,code);
    };
    var list5_onsubmit = function (code,id) {
        onSub(4);
    };
</script>
</html>
